<template>
    <view class="contaienr">
        <view class="login-container">
            <view class="later-login-container">
                <span>稍后登录</span>
            </view>
            <view class="username-container">
                <input type="text" maxlength="11" inputmode="tel" placeholder="请输入您的手机号" v-model="mobile" />
                <view class="divider"></view>
            </view>
            <view class="sms-container">
                <view class="sms-code-container">
                    <input type="text" maxlength="6" inputmode="numeric" placeholder="请输入验证码" v-model="smsCode" />
                    <button @click="getSmsCode">{{ smsCodeText }}</button>
                </view>
                <view class="divider"></view>
            </view>
            <button :class="loginButtonActive ? 'login-button-active' : 'login-button'" @click="login" :disabled="!loginButtonActive">登录</button>
            <view class="privacy-container">
                <checkbox-group @change="privacyCheckedChanged">
                    <label>
                        <checkbox value="1" border-color="#969696" active-border-color="#969696" />
                        <text>请确认您已年满18周岁并已阅读《恋爱邮局用户协议》</text>
                    </label>
                </checkbox-group>
            </view>
        </view>
        <view>
            <uni-popup ref="tipsDialog" type="dialog">
                <uni-popup-dialog type="error" confirmText="确定" title="提示" :content="tipsContent"></uni-popup-dialog>
            </uni-popup>
        </view>
        <view>
            <tips-dialog title="提示" :content="tipsContent" confirmText="确认" v-model:show="showDialog"></tips-dialog>
        </view>
    </view>
</template>

<script setup>
import { ref, watch } from 'vue';
import TipsDialog from '@/components/TipsDialog.vue';
import { validateMobile, validateSmsCode } from '@/static/js/common';
const privacyChecked = ref(false);
function privacyCheckedChanged(e) {
    const value = e.detail.value;
    if (value.length) {
        privacyChecked.value = true;
    } else {
        privacyChecked.value = false;
    }
}
const remainSeconds = ref(0);
const smsCodeEnable = ref(true);
const smsCodeText = ref('获取验证码');
const smsCodeTimer = ref();
function getSmsCode() {
    if (!smsCodeEnable.value) {
        return;
    }
    smsCodeTimer.value = setInterval(decrementRemainSeconds, 1000);
    smsCodeEnable.value = false;
    remainSeconds.value = 60;
}
function decrementRemainSeconds() {
    remainSeconds.value--;
}
watch(remainSeconds, (newValue) => {
    if (newValue <= 0) {
        clearInterval(smsCodeTimer.value);
        smsCodeText.value = '获取验证码';
        smsCodeEnable.value = true;
    } else {
        smsCodeText.value = `重新获取(${remainSeconds.value}秒)`;
    }
});
const mobile = ref('');
const smsCode = ref('');
const loginButtonActive = ref(false);
watch(privacyChecked, (newValue) => {
    loginButtonActive.value = mobile.value.length > 0 && smsCode.value.length > 0 && newValue;
});
watch(mobile, (newValue) => {
    loginButtonActive.value = newValue.length > 0 && smsCode.value.length > 0 && privacyChecked.value;
});
watch(smsCode, (newValue) => {
    loginButtonActive.value = newValue.length > 0 && mobile.value.length > 0 && privacyChecked.value;
});
const tipsDialog = ref(null);
const showDialog = ref(false);
const tipsContent = ref('');
function login() {
    if (!validateMobile(mobile.value)) {
        tipsContent.value = '您输入的手机号码格式有误，请重新输入';
        showDialog.value = true;
        return;
    }
    if (!validateSmsCode(smsCode.value)) {
        tipsContent.value = '请输入6位数字的验证码';
        showDialog.value = true;
        return;
    }
    uni.navigateTo({
        url: '/pages/main/index'
    });
}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.contaienr {
    @extend .column-container-layout;
    background-image: url('/static/img/login/login_background.png');
    background-attachment: fixed;
    background-size: 100% 100%;
    justify-content: center;
    .login-container {
        @extend .column-layout;
        background-color: white;
        border-radius: 20px;
        width: 90%;
        margin: 180px 0 0 0;
        .later-login-container {
            @extend .row-layout;
            justify-content: flex-end;
            span {
                border-radius: 0 20px 0 20px;
                width: 85px;
                height: 32px;
                font-size: 14px;
                background-color: #ededed;
                color: #666666;
                text-align: center;
                line-height: 32px;
            }
        }
        .username-container {
            @extend .column-layout;
            padding: 10px 20px;
            input {
                width: 100%;
                color: #333333;
                background-color: white;
                padding: 5px;
                font-size: 16px;
                line-height: 22px;
                height: 22px;
                padding: 10px 0;
            }
        }
        .sms-container {
            @extend .column-layout;
            padding: 10px 20px;
            .sms-code-container {
                @extend .row-layout;
                input {
                    width: 100%;
                    color: #333333;
                    background-color: white;
                    padding: 5px;
                    font-size: 16px;
                    line-height: 22px;
                    height: 22px;
                    padding: 10px 0;
                    flex: 1;
                }
                button {
                    height: 34px;
                    line-height: 34px;
                    border: 1px solid #dbdbdb;
                    border-radius: 30px;
                    background-color: white;
                    font-size: 14px;
                    color: #666666;
                }
            }
        }
        .login-button {
            width: 75%;
            height: 56px;
            line-height: 56px;
            background-color: #dbdbdb;
            border-radius: 30px;
            color: white;
            margin: 20px 0;
            align-self: center;
        }
        .login-button-active {
            @extend .login-button;
            background-image: url('/static/img/login/login_button.png');
            background-attachment: fixed;
            background-size: 100% 100%;
        }
        .privacy-container {
            @extend .row-layout;
            justify-content: center;
            align-items: center;
            margin: 0 0 20px 0;
            checkbox {
                transform: scale(0.7);
            }
            text {
                font-size: 12px;
                color: #666666;
            }
        }
    }
}
</style>
